<!--
 * @Author: zqx me_zqx@163.com
 * @Date: 2025-02-20 09:51:49
 * @LastEditors: zqx me_zqx@163.com
 * @LastEditTime: 2025-08-27 15:59:57
 * @FilePath: /XMate-h5/src/views/customerAndBusiness/components/meddic/index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="meddic-form px-4 flex flex-col h-full">
    <meddicHead :meddicInfo="cp_meddicInfo" />
    <span class="flex justify-end mb-2">
      <van-icon
        class="cursor-pointer"
        @click="handleClickEdit"
        name="edit"
        :color="allowEdit ? '#436BFF' : 'gray'"
      ></van-icon>
    </span>

    <div v-ai-tip class="flex flex-col flex-auto overflow-y-auto">
      <MeddicFormItem
        v-for="item in cp_meddicInfo"
        :key="item.type"
        :icon="item.icon"
        :title="item.title"
        :tooltip-content="item.tooltipContent"
        :type="item.type"
        :status="item.status"
        :editMode="allowEdit"
        v-model="formData[item.type.toLowerCase()].content"
        v-model:lock="formData[item.type.toLowerCase()].lock"
        @on-blur="handleMeddicUpdate"
        @on-lock-change="handleLockChange"
      />
    </div>

    <!-- 按钮组 -->
    <div class="flex justify-end py-6 space-x-4" v-if="allowEdit">
      <el-button type="primary" color="#436BFF" @click="submitForm">确定</el-button>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, computed, defineProps } from "vue";
import MeddicFormItem from "./MeddicFormItem.vue";
import meddicHead from "./meddicHead.vue";
import { useCustomerStore, useBusinessStore } from "@/store";

const store = useCustomerStore();
const businessStore = useBusinessStore();

const props = defineProps({
  isCustomer: {
    type: Boolean,
    default: true,
  },
});

const formData = ref({
  metrics: {
    content: "",
    lock: false,
  },
  economic_buyer: {
    content: "",
    lock: false,
  },
  decision_criteria: {
    content: "",
    lock: false,
  },
  decision_process: {
    content: "",
    lock: false,
  },
  identify_pain: {
    content: "",
    lock: false,
  },
  champion: {
    content: "",
    lock: false,
  },
});

onMounted(async () => {
  console.log("meddic onMounted: ", props.isCustomer);
  const data = props.isCustomer
    ? await store.getCustomerMeddicAction()
    : await businessStore.getOpportunityMeddicAction();
  data.forEach((item) => {
    const type = item.meddicType.toLowerCase();
    if (formData.value[type]) {
      formData.value[type].content = item.content || "";
      formData.value[type].lock = Boolean(item.contentLocked);
    }
  });
});

const allowEdit = ref(false);
function handleClickEdit() {
  allowEdit.value = !allowEdit.value;
}

const meddicInfo = computed(() => {
  return store.meddicInfo || [];
});

const cp_meddicInfo = computed(() => {
  const array = [
    {
      icon: "M",
      title: "衡量标准",
      tooltipContent:
        "Metrics（衡量标准）：客户在购买决策中所关注的具体量化指标，如投资回报率（ROI）、成本节约、生产效率提升等。",
      type: "METRICS",
      status:
        meddicInfo.value.find((item) => item.meddicType == "METRICS")?.meddicStatus || "",
    },
    {
      icon: "E",
      title: "经济买家",
      tooltipContent:
        "Economic Buyer（经济买家）：在购买过程中具有最终决策权的人物，他们通常关注投资回报和预算等问题。",
      type: "ECONOMIC_BUYER",
      status:
        meddicInfo.value.find((item) => item.meddicType == "ECONOMIC_BUYER")
          ?.meddicStatus || "",
    },
    {
      icon: "D",
      title: "决策标准",
      tooltipContent:
        "Decision Criteria（决策标准）：客户在评估和选择供应商时所依据的标准，如产品质量、价格、售后服务等。",
      type: "DECISION_CRITERIA",
      status:
        meddicInfo.value.find((item) => item.meddicType == "DECISION_CRITERIA")
          ?.meddicStatus || "",
    },
    {
      icon: "D",
      title: "决策流程",
      tooltipContent:
        "Decision Process（决策流程）：客户在做出购买决策时所经历的步骤和流程，包括内部审批、评估等环节。",
      type: "DECISION_PROCESS",
      status:
        meddicInfo.value.find((item) => item.meddicType == "DECISION_PROCESS")
          ?.meddicStatus || "",
    },
    {
      icon: "I",
      title: "痛点",
      tooltipContent:
        "Identify Pain（确定痛点）： 客户在运营过程中面临的挑战和问题，如生产效率低下、成本过高等。",
      type: "IDENTIFY_PAIN",
      status:
        meddicInfo.value.find((item) => item.meddicType == "IDENTIFY_PAIN")
          ?.meddicStatus || "",
    },
    {
      icon: "C",
      title: "教练",
      tooltipContent:
        "Champion（教练）： 在客户组织内部支持销售人员的关键人物，他们通常对积极态度，并愿意在内部推动购买决策。",
      type: "CHAMPION",
      status:
        meddicInfo.value.find((item) => item.meddicType == "CHAMPION")?.meddicStatus ||
        "",
    },
  ];

  return array;
});

// 添加锁定状态更新处理函数
function handleLockChange({ meddicType, contentLocked }) {
  if (props.isCustomer) {
    store.updateCustomerMeddicAction({
      meddicType,
      contentLocked,
    });
  } else {
    businessStore.updateOpportunityMeddicAction({
      meddicType,
      contentLocked,
    });
  }
}

function handleMeddicUpdate({ meddicType, content }) {
  if (props.isCustomer) {
    store.updateCustomerMeddicAction({
      meddicType,
      content,
    });
  } else {
    businessStore.updateOpportunityMeddicAction({
      meddicType,
      content,
    });
  }
}

async function submitForm() {
  if (props.isCustomer) {
    await store.remakeCustomerMeddicAction();
  } else {
    await businessStore.remakeOpportunityMeddicAction();
  }
}
</script>

<style lang="less" scoped>
.meddic-form {
  background: #fff;
  border-radius: 8px;

  :deep(.el-textarea__inner) {
    border-radius: 4px;
    &:focus {
      border-color: #436bff;
    }
  }

  .bg-primary {
    background-color: #436bff;
  }
}
</style>
